<template>
  <div class="content">
    <el-steps :active="currentStep" finish-status="success">
      <el-step
        v-for="step in steps"
        :key="step.title"
        :title="step.title"
        :status="step.title === '副组长审批' && isChargehand == 0 ? 'wait' : ''"
      ></el-step>
    </el-steps>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, PropType } from "vue";
defineProps({
  currentStep: {
    type: Number,
    require: true,
    default: 0
  },
  steps: {
    type: Array as PropType<{ title: string }[]>,
    require: true,
    default: () => []
  },
  isChargehand: {
    default: 1 // （是否经过副组长审批（1：经过、0：不经过））
  }
});
</script>

<style lang="scss" scoped>
.content {
  &:deep .el-step__title {
    font-size: 12px;
  }

  // 已完成配置
  &:deep .el-step__title.is-success {
    color: #409eff; // 中文字体颜色
  }
  &:deep .el-step__head.is-success {
    color: #fff; // 图标颜色
    .el-step__icon.is-text {
      border-color: #409eff; // 圆圈边框
      background-color: #409eff; // 圆框背景色
    }
    .el-step__line {
      background-color: #409eff; // 已完成直线颜色
    }
  }

  // 正在进行中
  &:deep .el-step__head.is-process {
    color: #409eff; // 图标颜色
    // color: red; // 图标颜色
    .el-step__icon.is-text {
      border-color: #409eff; // 圆圈边框
      background-color: #fff; // 圆框背景色
    }
    .el-step__icon-inner {
      // display: none;
      width: 16px;
      height: 16px;
      background: #409eff;
      border-radius: 50%;
    }
  }
  // 未执行
  &:deep .el-step__head.is-wait {
    // color: #409eff; // 图标颜色
    // .el-step__icon.is-text {
    //   border-color: #409eff; // 圆圈边框
    //   background-color: #fff; // 圆框背景色
    //
    height: 24px;
    .el-step__icon-inner {
      display: none;
    }
  }
}
</style>
